<template>
  <div class="page bgc-fff">
    <x-header title="报班"></x-header>
    <!-- tab -->
    <div class="tab-box-wrap">
      <div class="pad15">
        <div class="tab-box">
        <div class="tab-item f14" v-for="(item,index) in tabData.options" :key="index"
          @click="tabClick(index)"
          :class="[{'active':index==tabIndex}]">
          {{item.value}}
        </div>
      </div>
      </div>
      <div style="clear:both;"></div>
    </div>
    <!--<div style="height:1.17rem;"></div>-->
    <!-- content -->
    <v-AddCalss v-show="tabIndex==0" @to-addclasshistory='tabIndexClick'></v-AddCalss>
    <!-- :classListData='classListData' -->
    <v-AddCalssHistory ref='addcalsshistory' v-show="tabIndex==1"  @to-addclasshistory='tabIndexClick'></v-AddCalssHistory>
  </div>
</template>

<script type="text/ecmascript-6">
import AddCalss from '@/components/driver/driverMeCheckin/add_checkin'
import AddCalssHistory from '@/components/driver/driverMeCheckin/add_checkin_history'
import { XHeader } from 'vux'
export default {
  name: 'me-driverCheckin',
  data() {
    return {
      tabIndex: 0,
      tabData: {
        options: [
          { id: 0, value: '报班' },
          { id: 1, value: '报班历史' }
        ]
      },
      loadingShow: false,
      allLoaded: false, // 是否可以上拉属性，false可以上拉，true为禁止上拉，就是不让往上划加载数据了
      scrollMode: 'auto', // 移动端弹性滚动效果，touch为弹性滚动，auto是非弹性滚动
      classListData: []
    }
  },
  components: {
    XHeader,
    'v-AddCalss': AddCalss,
    'v-AddCalssHistory': AddCalssHistory
  },
  created() {

  },
  mounted() {

  },
  methods: {
    tabClick: function(index) {
      this.tabIndex = index
      const that = this
      if (index === 1) {
        that.$refs.addcalsshistory.goloadPageList()
      }
    },
    tabIndexClick: function(index) {
      this.tabIndex = index
      const that = this
      if (index === 1) {
        that.$refs.addcalsshistory.goloadPageList()
      }
    }
  }
}
</script>

<style scoped>
  .page{
    overflow-y: auto;
  }
  .tab-box-wrap{
    background-color: #f5f9fd;
    width: 100%;
    position: fixed;
    top: 0.46rem;
    left: 0;
    z-index: 3;
  }
  .tab-box{
    overflow: hidden;
    border-radius: .04rem;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    border:1px solid #7cbdff;
  }
  .tab-item{
    padding-top: .1rem;
    padding-bottom: .1rem;
    width: 50%;
    background-color: #fff;
    color: #7cbdff ;
  }
  .tab-item.active{
    background-color: #7cbdff ;
    color: #fff;
  }
</style>
